<template>
  <div class="headers">
    <el-row class="header_box" :style="{'background-color':bgColor,'color':ftColor}">
      <el-col :span="3"><div class="logo" @click="toIndex">Acompe</div></el-col>
      <el-col :offset="15" :span="6">
        <div class="login_button" v-if="isLogin" @click="toMine">{{name}}</div>
        <div class="login_button" v-else @click="loginDialgChange">登录</div>
      </el-col>
      <el-dialog title="账号登录" :visible.sync="loginDialgVisiable" width="30%">
        <Login/>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import Login from './Login.vue';
export default {
  name: 'headers',
  components:{
    'Login':Login
  },
  props:['bgColor','ftColor'],
  computed:{
    loginDialgVisiable:{
      get(){
        return this.$store.state.user.loginDialog.visiable;
      },
      set(v){
        this.$store.commit('loginDialgChange')
      }
    },
    name:function(){
      return this.$store.state.user.info.name;
    },
    isLogin:function(){
      return this.$store.state.user.isLogin;
    }
  },
  methods:{
    loginDialgChange:function(){
      this.$store.commit('loginDialgChange')
    },
    toMine:function(){
      this.$router.push('/mine/info');
    },
    toIndex:function(){
      this.$router.push('/');
    }
  }
}
</script>

<style scoped>
.headers{
  min-height: 10vh;
}
.header_box{
  padding: 20px;
}
.login_button{
  text-align: right;
  cursor:pointer;
  padding-right: 20px;
  font-size: 12px;
}
.logo{
  cursor:pointer;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
</style>
